import BaseLayer from './BaseLayer';
import HollowCircle from '../base/HollowCircle';
import Color from '../core/Color';
import OChart from '../core/OChart';
import Event from '../event/Event';

export default class extends BaseLayer {
    constructor(canvas, option) {
        super(canvas);
        this.width = option.width || canvas.width;
        this.height = option.height || canvas.height;
        this.dateStart = option.dataStart;
        this.timeStep = option.timeStep || 1;
        this.dates = [];
        this.color = new Color(option.color || '#21B3EA');
        this.onClick = option.onClick;
    }

    make() {
        this.clearEventListener();
        this.childs.splice(0, this.childs.length);
        this.dates.forEach((item, index) => {
            if (item - this.dateStart > 0) {
                let circle = new HollowCircle(this.canvas, 6);
                circle.setColor(this.color);
                const posX = (item - this.dateStart) * this.timeStep;
                circle.setPosition(this.position.x + posX, this.position.y);
                circle.addEventListener(OChart.isPC() ? Event.EVENT_CLICK : Event.EVENT_TAP, (e) => {
                    this.onClick && this.onClick(e.prototypeEvent.clientX, item);
                });
                this.addChild(circle);
            }

        });
    }
}
